<template>
  <div class="nav">
    <router-link class="routeItem" active-class="active" to="/about"
      >about</router-link
    >
    <router-link class="routeItem" active-class="active" to="/home"
      >home</router-link
    >
  </div>
</template>

<style scoped lang="less">
.nav {
  padding: 20px;
  border-radius: 10px;
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 15px;

  .routeItem {
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 14px;
    color: #fff;

    &.active {
      background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
      color: #fff;
      font-size: 16px;
    }
  }
}
</style>
